<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Demo-09-监视属性</title>
    <script type="text/javascript" src="../JS/vue.js"></script>
</head>
<body>
<!-- 监视属性 watch
    1、当被监视的属性变化时，回调函数自动调用
    2、监视的属性必须存在才能进行监视
    3、监视的两种写法
        （1）new Vue 时传入 watch 配置
        （2）通过 vm.$watch 监视 -->

<div id="root">
    <h2>今天天气很{{ info }}</h2>
    <button @click="changeWeather">切换天气</button>
</div>

<script text="text/javascript">
    const vm = new Vue({
        el: '#root',

        data: {
            isHot: true,
        },

        computed: {
            info() {
                return this.isHot ? '炎热' : '凉爽';
            },
        },

        methods: {
            changeWeather() {
                this.isHot = !this.isHot;
            },
        },

        /* watch: {
            // isHot 函数什么时候被调用？当 isHot 值被修改后调用
            isHot: {
                immediate: true, // 初始化让 handler 函数调用一下

                handler(newValue, oldValue) {
                    alert('isHot值被修改了')
                },
            }
        }, */
    })

    // 动态监视属性
    vm.$watch('isHot', {
        immediate: false, // 初始化让 handler 函数调用一下

        handler(newValue, oldValue) {
            alert('isHot值被修改了')
        },
    })
</script>
</body>
</html>